import React from 'react';
import { Card, List, Rate, Tag, Tooltip } from 'antd';
import { MessageOutlined } from '@ant-design/icons';

const reviews = [
  {
    id: 1,
    title: 'AI医学影像分析软件',
    score: 4.7,
    comments: 12,
    desc: '支持多种医学影像格式，智能识别病灶区域，辅助医生诊断。',
    tag: '医疗健康',
    color: '#ff7875'
  },
  {
    id: 2,
    title: '智能投顾平台',
    score: 4.5,
    comments: 8,
    desc: '基于大模型的智能投顾，个性化资产配置建议。',
    tag: '金融科技',
    color: '#36cfc9'
  },
  {
    id: 3,
    title: 'AI质检一体机',
    score: 4.6,
    comments: 5,
    desc: '集成AI算法的自动化质检设备，提升生产效率。',
    tag: '智能制造',
    color: '#40a9ff'
  }
];

const ProductReview: React.FC = () => {
  return (
    <Card title={<span style={{ fontWeight: 600, fontSize: 18 }}>产品评测</span>} bordered={false} style={{ background: '#fff', borderRadius: 16 }}>
      <List
        itemLayout="vertical"
        dataSource={reviews}
        renderItem={item => (
          <List.Item style={{ marginBottom: 16 }}>
            <Card
              style={{ borderLeft: `8px solid ${item.color}`, borderRadius: 12, background: '#f6faff' }}
              title={<span style={{ fontWeight: 600 }}>{item.title}</span>}
              extra={<Tag color={item.color}>{item.tag}</Tag>}
            >
              <div style={{ color: '#555', marginBottom: 8 }}>{item.desc}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <Rate allowHalf disabled defaultValue={item.score} />
                <span style={{ color: '#1677ff', fontWeight: 500 }}>{item.score}</span>
                <Tooltip title="评论数">
                  <span style={{ color: '#888' }}><MessageOutlined /> {item.comments}</span>
                </Tooltip>
              </div>
            </Card>
          </List.Item>
        )}
      />
    </Card>
  );
};

export default ProductReview; 